{extend name='main'}

{block name='content'}

<style>

    .portal-block-container .portal-block-item {
        color: #202020 ;
        line-height: 41px;
        padding: 0;
        position: relative;
    }
    .portal-block-container .portal-block-item>div:nth-child(2) {
        line-height: 41px;
        font-size: 14px;
    }
    .store-total-container {
        font-size: 14px;
        margin-bottom: 20px;
        letter-spacing: 1px;
    }

    .store-total-container .store-total-icon {
        top: 45%;
        right: 8%;
        font-size: 65px;
        position: absolute;
        color: rgba(255, 255, 255, 0.4);
    }

    .store-total-container .store-total-item {
        color: #fff;
        line-height: 4em;
        padding: 15px 25px;
        position: relative;
    }

    .store-total-container .store-total-item > div:nth-child(2) {
        font-size: 46px;
        line-height: 46px;
    }

    .box-top{
        border: 1px solid #d0d0d0;
        border-radius: 3px;
    }
    .tips-top{
        width: 50%;
        text-align: end;
        display: inline-block;
    }
    .box-order-info{
        width: 50%;
        display: inline-block;
    }
    .top-title{
        height: 38px;
        line-height: 38px;
        display: inline-block;
    }
    .my-from-select{
        width: 130px;
        display: inline-block;
        padding-left: 10px;
    }
    .look-all{
        display: inline-block;
        float: right;
        line-height: 38px;
        padding-right: 20px;
        cursor: pointer;
    }
    .chart-box{
        min-height: 300px;
        text-align: center;
        line-height: 300px;
        border: 1px solid #d0d0d0;
        margin: 10px;
        margin-left: 0;
    }
    .merchant-box{
        border: 1px solid #6d6865;
        padding: 20px !important;
        min-height: 60px;
    }
    .merchant-name{
        padding: 4px;
        text-align: center;
    }
    .look-all-merchant-info{
        display: block;
        float: right;
        cursor: pointer;
        font-weight: normal;
        font-size: 14px;
    }
    .look-all-user-info{
        display: block;
        float: right;
        cursor: pointer;
        font-weight: normal;
        font-size: 14px;
    }
    .color-black{
        color: #333;
    }
    .user-box{
        height: 60px;
        line-height: 60px;
        margin: 10px;
    }
    .user-header-img{
        width: 40px;
        border-radius: 50%;
        height: 40px;
        line-height: 60px;
        margin: 10px;
        border: 1px solid;
        float: left
    }
    .user-nickname{
        float: left;
    }
    .think-box-shadow{
        box-shadow: none !important;
        margin-bottom: 10px;
    }


    .time-input{
        width: 160px;
        display: inline-block;
        padding-left: 10px;
    }
</style>
<!--顶部数据概览-->
<div class="think-box-shadow store-total-container notselect">
    <div class="layui-row layui-col-space20 portal-block-container notselect">
        <div class="layui-col-sm6 layui-col-md6 layui-col-lg2">
            <div class="portal-block-item nowrap box-top" style="">
                <div>
                    <span class="tips-top">今日访客</span>
                    <span class="padding-10">8989</span>
                </div>

                <div>
                    <span class="tips-top">昨日访客</span>
                    <span class="padding-10">123</span>
                </div>
            </div>
        </div>

        <div class="layui-col-sm6 layui-col-md6 layui-col-lg2">
            <div class="portal-block-item nowrap box-top" style="">
                <div>
                    <span class="tips-top">今日订单</span>
                    <span class="padding-10">48989</span>
                </div>

                <div>
                    <span class="tips-top">昨日订单</span>
                    <span class="padding-10">16223</span>
                </div>
            </div>
        </div>

        <div class="layui-col-sm6 layui-col-md6 layui-col-lg2">
            <div class="portal-block-item nowrap box-top" style="">

                <div>
                    <span class="tips-top">今日交易金额</span>
                    <span class="padding-10">15,234.56</span>
                </div>

                <div>
                    <span class="tips-top">昨日交易金额</span>
                    <span class="padding-10">14,320.88</span>
                </div>

            </div>
        </div>

        <div class="layui-col-sm6 layui-col-md6 layui-col-lg2">
            <div class="portal-block-item nowrap box-top" style="">

                <div>
                    <span class="tips-top">今日入驻</span>
                    <span class="padding-10">100</span>
                </div>

                <div>
                    <span class="tips-top">商家总数</span>
                    <span class="padding-10">45451</span>
                </div>


            </div>
        </div>

        <div class="layui-col-sm6 layui-col-md6 layui-col-lg2">
            <div class="portal-block-item nowrap box-top" style="">
                <div>
                    <span class="tips-top">新增用户</span>
                    <span class="padding-10">100</span>
                </div>

                <div>
                    <span class="tips-top">全部用户</span>
                    <span class="padding-10">45451</span>
                </div>

            </div>
        </div>
    </div>
</div>

<!--订单数量-->
<div class="think-box-shadow store-total-container">
    <div class='box-order-info'>
        <div class="box-order-info-top">
            <div class="top-title font-s15 font-w6 color-black">订单数量 </div>
            <div class="layui-input-block" style=" margin-left: 10px;display: inline-block;">
                <input type="text" class="layui-input time-input" id="start_time_order" name="start_time" placeholder="请选择开始日期">
                    -
                <input type="text" class="layui-input time-input" id="end_time_order" name="end_time" placeholder="请选择结束日期">
                <button class="layui-btn layui-btn-normal" style="margin-left: 10px;" id="query-order-num">查询</button>
            </div>

            <span class="look-all color-black" onclick="window.location.href='https://baidu.com' ">查看全部</span>
        </div>

        <div class="chart-box" style="">
            <!-- 饼图 -->
            <div id='main_order' style='width:50%;height:450px;margin: auto'></div>

        </div>

    </div>

    <div class='box-order-info'>
        <div class="box-order-info-top">
            <div class="top-title  font-s15 font-w6 color-black" >交易金额 </div>
            <div class="layui-input-block" style=" margin-left: 10px;display: inline-block;">
                <input type="text" class="layui-input time-input" id="start_time_price" name="start_time_price" placeholder="请选择开始日期">
                -
                <input type="text" class="layui-input time-input" id="end_time_price" name="end_time_price" placeholder="请选择结束日期">
                <button class="layui-btn layui-btn-normal" style="margin-left: 10px;" id="query-order-price">查询</button>
            </div>
            <span  class="look-all color-black" onclick="window.location.href='https://360.com' ">查看全部</span>
        </div>

        <div class="chart-box" style="">
            <!-- 饼图 -->
            <div id='main_price' style='width:50%;height:450px;margin: auto'></div>
        </div>
    </div>

</div>

<script>
    form.render();

    //订单数量，日期时间选择器
    laydate.render({
        elem: '#start_time_order'
        ,type: 'datetime'
    });
    laydate.render({
        elem: '#end_time_order'
        ,type: 'datetime'
    });

    //交易金额，日期时间选择器
    laydate.render({
        elem: '#start_time_price'
        ,type: 'datetime'
    });
    laydate.render({
        elem: '#end_time_price'
        ,type: 'datetime'
    });


    /*订单数量，饼图 */
    //初始化查询 当月的
    var main_order = echarts.init(document.getElementById('main_order'), 'light');
    main_order.setOption({
        title: {
            text: '',
            subtext: '订单数量(单位/笔)',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: ['待发货', '待支付', '退换货', '确认收货','已取消','待收货']
        },
        series: [
            {
                name:"订单",
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data: [
                    {value: 10, name: '待发货'},
                    {value: 1, name: '待支付'},
                    {value: 2, name: '退换货'},
                    {value:3, name: '确认收货'},
                    {value: 4, name: '已取消'},
                    {value: 5, name: '待收货'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    });
    //指定时间范围查询
    $('#query-order-num').click(function () {
        layer.load(0, {shade: [0.1,'#fff']});
        $.post(
            "/{:sysconf('xpath')}/index/queryOrderNumber",
            {
                start_time: $('#start_time_order').val(),
                end_time: $('#end_time_order').val()
            },
            function (res) {
                layer.closeAll();
                if (!res.code) {
                    layer.alert(res.info, {icon: 2,});
                    return;
                }
                var main_order = echarts.init(document.getElementById('main_order'), 'light');

                main_order.setOption({
                    title: {
                        text: '',
                        subtext: '订单数量(单位/笔)',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: ['待发货', '待支付', '退换货', '确认收货', '已取消', '待收货']
                    },
                    series: [
                        {
                            name: "订单",
                            type: 'pie',
                            radius: '65%',
                            center: ['50%', '50%'],
                            selectedMode: 'single',
                            data: [
                                {value: 10, name: '待发货'},
                                {value: 2, name: '待支付'},
                                {value: 1, name: '退换货'},
                                {value: 2, name: '确认收货'},
                                {value: 1, name: '已取消'},
                                {value: 2, name: '待收货'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            },
            'json');
    });



    var main_price = echarts.init(document.getElementById('main_price'), 'light');
    main_price.setOption({
        title: {
            text: '',
            subtext: '交易金额(单位/元)',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            bottom: 10,
            left: 'center',
            data: ['退款金额', '已支付', '待支付']
        },
        series: [
            {
                name:"交易金额",
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data: [
                    {value:12, name: '退款金额'},
                    {value:0.8, name: '已支付'},
                    {value: 5, name: '待支付'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    });

    $('#query-order-price').click(function () {
        layer.load(0, {shade: [0.1,'#fff']});
        $.post(
            "/{:sysconf('xpath')}/index/queryOrderPrice",
            {
                start_time: $('#start_time_price').val(),
                end_time: $('#end_time_price').val()
            },
            function (res) {
                layer.closeAll();
                if (!res.code) {
                    layer.alert(res.info, {icon: 2,});
                    return;
                }
                var main_price = echarts.init(document.getElementById('main_price'), 'light');
                main_price.setOption({
                    title: {
                        text: '',
                        subtext: '交易金额(单位/元)',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: ['退款金额', '已支付', '待支付']
                    },
                    series: [
                        {
                            name:"交易金额",
                            type: 'pie',
                            radius: '65%',
                            center: ['50%', '50%'],
                            selectedMode: 'single',
                            data: [
                                {value: 6, name: '退款金额'},
                                {value:5, name: '已支付'},
                                {value: 1, name: '待支付'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            },
            'json');
    });


</script>
{/block}